<template>
  <div class="entrustManage">
    <div class="header">
      <span class="el-icon-setting" style="font-size: 22px"></span
      ><span class="title">账号设置</span>
    </div>
    <div class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/userInfo' }"
          >账号设置</el-breadcrumb-item
        >
        <el-breadcrumb-item>委托管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <dividerTitle
        title="我的委托人"
        :noBackground="true"
        :fontSize="18"
      ></dividerTitle>
      <div class="container">
        <div class="add">
          <el-button
            size="mini"
            icon="el-icon-plus"
            type="primary"
            @click="addEntrust"
          >
            添加委托人
          </el-button>
        </div>
        <base-table
          style="height: calc(100% - 240px)"
          :tableSetting="baseTableSetting"
        ></base-table>
        <dialogPublic
          :title="title"
          :show.sync="show"
          v-if="show"
          width="35%"
          @doSubmit="doSubmit"
          @doClose="() => (show = false)"
        >
          <editForm
            :formConfig="formConfig"
            ref="editForm"
            :formData="editFormData"
          ></editForm>
          <div class="role">
            <div class="top">授权角色</div>
            <div class="content">
              <el-tree
                :data="roleTreeData"
                show-checkbox
                node-key="id"
                ref="tree"
                default-expand-all
                :default-checked-keys="defaultCheck"
              >
              </el-tree>
            </div>
          </div>
        </dialogPublic>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryAgentList,
  authorize,
  removeAuth,
} from "@/api/systemManagement/userManagement.js";
export default {
  data() {
    return {
      title: "",
      show: false,
      //基本参数
      baseTableSetting: {
        indexShow: true,
        column: [
          {
            label: "用户名",
            textAlign: "center",
            prop: "agentName",
          },
          {
            label: "委托失效时间",
            textAlign: "center",
            prop: "expired",
          },
          {
            label: "委托状态",
            textAlign: "center",
            prop: "expired",
            formatter: (row) => {
              if (row.aging) {
                return "生效中";
              } else {
                let nowTime = new Date().getTime();
                let expired = new Date(row.expired).getTime();
                return nowTime < expired ? "生效中" : "已失效";
              }
            },
          },
          {
            label: "角色",
            textAlign: "center",
            prop: "appVos",
            width: 600,
            scopeType: "formate",
            method: (row) => {
              let dom = "";
              row.appVos.forEach((item) => {
                let name = item.roleVoList.map((role) => role.name);
                let value = `[${item.appName}]: ${name}`;
                dom += "<div style='text-align:left'>" + value + "</div>";
              });
              return dom;
            },
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "修改授权",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.updateEntrust(row);
                },
              },
              {
                text: "解除委托",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.$confirm("确定要解除委托吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.removeEntrust(row);
                    })
                    .catch((e) => {});
                },
              },
            ],
          },
        ],
        data: [],
        noBorderRight: false,
        autoHeight: true,
        //height: 400,
      },
      //弹出框表单配置信息
      formConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "委托人",
            prop: "agentName",
            idsStr: "agent",
            type: "user",
            span: 18,
            required: true,
          },
          {
            label: "委托时效",
            prop: "aging",
            type: "radio",
            span: 18,
            required: true,
            radioOption: [
              { label: "长期有效", value: 1 },
              { label: "短期有效", value: 0 },
            ],
            methods: (val) => {
              if (val.value == 1) {
                this.$set(this.formConfig.itemArr[2], "isHide", true);
              } else {
                this.$set(this.formConfig.itemArr[2], "isHide", false);
              }
            },
          },
          {
            label: "有效期至",
            prop: "expired",
            type: "datetime",
            span: 18,
            isHide: false,
            required: true,
          },
        ],
      },
      //弹出框表单数据
      editFormData: {},
      roleTreeData: [],
      defaultCheck: [],
    };
  },
  created() {
    this.getTableData();
    this.handleTreeData();
  },
  methods: {
    async getTableData() {
      let res = await queryAgentList({
        leader: this.$store.getters.mineUserInfo.account,
      });
      this.$set(this.baseTableSetting, "data", res.data);
    },
    //将角色列表处理成树结构
    handleTreeData() {
      let data =
        this.$store.getters.mineUserInfo.userOwnJurisdictionBean.roleBean;
      let result = [];
      data.forEach((item, index) => {
        if (index == 0) {
          let obj = {
            id: item.appid,
            label: item.appName,
            factNode: false,
            children: [],
          };
          obj.children.push({
            id: item.id,
            label: item.name,
            factNode: true,
          });
          result.push(obj);
        } else {
          let same = result.find((child) => child.id == item.appid);
          if (same) {
            same.children.push({
              id: item.id,
              label: item.name,
              factNode: true,
            });
          } else {
            let obj = {
              id: item.appid,
              label: item.appName,
              factNode: false,
              children: [],
            };
            obj.children.push({
              id: item.id,
              label: item.name,
              factNode: true,
            });
            result.push(obj);
          }
        }
      });
      let tree = [
        {
          id: 0,
          label: "全部",
          factNode: false,
          children: result,
        },
      ];
      this.roleTreeData = tree;
    },
    //添加委托人
    addEntrust() {
      this.title = "添加委托人";
      this.editFormData.aging = 0;
      this.show = true;
    },
    //修改委托人
    updateEntrust(row) {
      this.title = "修改委托人";
      if (row.aging==1) {
        this.formConfig.itemArr[2].isHide = true;
      }
      this.editFormData = row;
      this.show = true;
      let appList = [];
      row.appVos.forEach((item) => {
        if (item.roleVoList) {
          item.roleVoList.forEach((child) => {
            appList.push(child.id);
          });
        }
      });
      this.defaultCheck = appList;
    },
    //提交数据
    async doSubmit() {
      let formData = await this.$refs.editForm.getFormData();
      let roleData = this.$refs.tree.getCheckedNodes();
      let data = [];
      roleData.forEach((item) => {
        if (item.factNode) {
          data.push(item.id);
        }
      });
      formData.roleIds = data;
      formData.leader = this.$store.getters.mineUserInfo.account;
      let res = await authorize(formData);
      this.$message.success(res.description);
      this.show = false;
      this.getTableData();
    },
    //解除委托
    async removeEntrust(row) {
      let param = {
        agent: row.agent,
        leader: row.leader,
      };
      let res = await removeAuth(param);
      this.$message.success(res.description);
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.entrustManage {
  width: 100%;
  height: 100%;
  background-color: white;
  border: 10px solid #eaf4ff;
  text-align: left;
  .header {
    height: 58px;
    line-height: 58px;
    padding-left: 20px;
    display: flex;
    //justify-content: center;
    align-items: center;
    border-bottom: 10px solid #eaf4ff;
    .title {
      font-size: 18px;
      font-weight: 400;
    }
  }
  .content {
    width: 100%;
    height: 100%;
    .container {
      width: 100%;
      height: 100%;
      padding: 10px;
      .add {
        margin: 10px 0;
        text-align: right;
      }
    }
  }
  .role {
    height: 400px;
    border: 1px solid #f2f2f2;
    .top {
      height: 40px;
      line-height: 40px;
      font-weight: 800;
      padding-left: 20px;
      background-color: #f2f2f2;
    }
    .content {
      height: calc(100% - 50px);
    }
  }
}
</style>